<template>
  <md-card class="md-layout-item" v-show="comment.list_key == listType">
      <md-card-header>
        <md-avatar>
          <img :src="comment.author.avatar" alt="Avatar">
        </md-avatar>

        <div class="md-title">{{ comment.author.name }}</div>
        <div class="md-subhead">Subtitle here</div>
      </md-card-header>
      <md-card-content>
        “{{ comment.content }}”
      </md-card-content>
      <div class="md-layout">
        <md-button class="md-icon-button md-accent">
          <md-icon>thumb_up</md-icon>
        </md-button>
        <md-button class=" text-right" :to="'/movies/' + comment.movie.id ">{{ comment.movie.name }}</md-button>
      </div>
    </md-card>
</template>
<style lang="scss" scoped>
  .md-card {
    width: 320px;
    margin: 4px;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 2px;
  }
  .text-right {
    text-align: right;
    padding:0 16px;
    color: #448aff;
    margin: 2px;
    margin-left: auto;
  }
</style>
<script>
export default {
  name: 'comment',
  props: {
    comment: {
      type: Object
    },
    listType: {
      type: Number,
      default: 1,
    }
  },
  created() {

  }
}
</script>

